<script setup>
import { ref,onUnmounted } from 'vue'
import emitter from '@/utils/emitter'
let snack = ref('奶油蛋糕')
let toy = ref('')
// 弟弟组件监听toy事件
emitter.on('toy', (value) => {
  console.log("弟弟收到了玩具: " + value);
  toy.value = value
  
})

// 建议你在组件销毁时，取消事件监听
onUnmounted(() => {
  emitter.off('toy')
  console.log("弟弟组件销毁");
  
})
</script>
<template>
  <div class="mychild">
    <h3>弟弟组件</h3>
    <h4>零食:{{ snack }}</h4>
    <h4 v-if="toy">弟弟收到了玩具:{{ toy }}</h4>
    </div>
</template>
<style scoped>
.mychild {
  background-color: #a72185;
  padding: 10px;
  border: 1px solid #000;
}
</style>